<template>
  <div class="div">
    <Header title="购物车"></Header>
    <div class="mb"></div>
    <van-card
      :title="item.name"
      :desc="item.memory+' '+item.colour"
      :num="item.number"
      :price="item.price"
      :thumb="poot+'miaozishangchengFile/commodity/'+item.name+'/'+item.name+' '+item.colour+'.jpg'"
      v-for="(item,index) in list"
      :key="index"
    >
      <div slot="footer">
        <van-button size="mini" color="#63F42F">购买</van-button>
        <van-button size="mini" color="red" @click="shanchu(item.time)">删除</van-button>
      </div>
    </van-card>
    <div class="tijiao">
      <div class="hj">
        合计:
        <font>{{heji}}</font>
      </div>
      <div>
        <van-button class="tijiaobtu" color="red" type="primary" size="mini" @click="tjgwc()">结算</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import Header from "@/components/Headergl/Header";

export default {
  data() {
    return {
      imageURL: "https://img.yzcdn.cn/vant/ipad.jpeg",
      list: [],
      heji: 0
    };
  },
  methods: {
    ...mapMutations(["xg"]),
    ...mapMutations(["userxg"]),
    ...mapMutations(["yxxg"]),
       ...mapMutations(["xggwcsz"]),
    tjgwc() {
      if(this.list.length>0){
 this.$router.push("/dingdan/"+this.heji);
      this.xg(true);
      }else{
          this.$toast("购物车是空的");
      }
     
    },
    chushihua() {
      this.$http
        .get(this.poot + "selectcartbyuser/" + this.user)
        .then(response => {
          console.log(response.data);
          this.list = response.data;
          this.chushihuaheji();
           this.xggwcsz(this.list.length)
        })
        .catch(function(error) {
          console.log(error);
          this.$toast("获取数据失败");
        });
    },
    chushihuaheji() {
      if (this.list.length > 0) {
        this.heji=0
        for (var i = 0; i < this.list.length; i++) {
          this.heji +=
            parseInt(this.list[i].number) * parseInt(this.list[i].price);
        }
      } else {
        this.heji = 0;
      }
    },
    shanchu(time) {
      this.$http
        .get(this.poot + "delete/" + time+"/"+this.user)
        .then(response => {
          this.chushihua();
          this.$toast("删除成功");
         
        })
        .catch(function(error) {
          console.log(error);
          this.$toast("删除失败");
        });
    }
  },
  components: {
    Header: Header
  },
  computed: {
    ...mapState(["poot"]),
    ...mapState(["yx"]),
    ...mapState(["zhuantai"]),
    ...mapState(["user"])
  },
  mounted() {
    this.chushihua();
    this.xg(false)
  }
};
</script>
<style scoped>
.div {
  margin-bottom: 70px;
  margin-top: 50px;
}
font {
  color: red;
}
.tijiao {
  margin-top: 10px;
}
.tijiaobtu {
  margin-left: 30%;
  width: 80px;
  height: 30px;
}
.hj {
  margin-top: 15px;
  font-size: 15px;
  float: left;
  margin-left: 20px;
}
</style>